<template>
  <div class="settlement-method-container">
    <div class="header">
      <h2>结算方式</h2>
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">
          <el-icon><plus /></el-icon>新增
        </el-button>
        <el-button @click="handleDisable">
          <el-icon><remove /></el-icon>禁用
        </el-button>
        <el-button @click="handleEnable">
          <el-icon><check /></el-icon>启用
        </el-button>
        <el-button @click="handleRefresh">
          <el-icon><refresh /></el-icon>刷新
        </el-button>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="操作" width="120">
        <template #default>
          <el-button type="text" size="small">
            <el-icon><edit /></el-icon>
          </el-button>
          <el-button type="text" size="small">
            <el-icon><delete /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            active-color="#409EFF"
            inactive-color="#DCDFE6"
            :active-value="true"
            :inactive-value="false"
          />
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <!-- <span class="total">1 - 5 共 5 条</span> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  Plus,
  Remove,
  Check,
  Refresh,
  Edit,
  Delete
} from '@element-plus/icons-vue'

const tableData = ref([
  { name: '信用卡', status: true },
])

const handleAdd = () => {
  console.log('新增结算方式')
}

const handleDisable = () => {
  console.log('禁用结算方式')
}

const handleEnable = () => {
  console.log('启用结算方式')
}

const handleRefresh = () => {
  console.log('刷新数据')
}
</script>

<style scoped>
.settlement-method-container {
  padding: 20px;
  background-color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.total {
  font-size: 14px;
  color: #606266;
}

.el-table {
  margin-top: 20px;
}
</style>